<template>
    <div style='height: 355px'>
        <el-scrollbar style='height: 105%' >
            <el-table
                :show-header='false'
                :data='recent'
                style='width:100%;'>
                <el-table-column>
                    <template #default='scope'>
                        <div style='display: inline-block'>
<!--                            标题-->
                            <div>
                                {{ scope.row.title }}
                            </div>
<!--                            状态-->
                            <el-tag
                                :type="
                                scope.row.state === '尚未开始'
                                    ? ''
                                    : scope.row.state === '正在比赛'
                                    ? 'success'
                                    : 'danger'
                            "
                            >{{ scope.row.state }}
                            </el-tag>
                        </div>
<!--                        前往-->
                        <div style='display: inline-block; position:absolute; top: 25px; right: 20px'>
                            <a href='#'>前往</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
</template>

<script>

export default {
    name: 'RecentContest',
    data() {
        return {
            recent: [
                {
                    title: 'WyyForces A赛 No.1',
                    state: '尚未开始'
                },
                {
                    title: 'WyyForces A赛 No.2',
                    state: '尚未开始'
                },
                {
                    title: 'WyyForces B赛 No.1',
                    state: '正在比赛'
                },
                {
                    title: 'WyyForces 图论赛 No.1',
                    state: '已结束'
                },
                {
                    title: 'WyyForces C赛 No.3',
                    state: '已结束'
                },
                {
                    title: 'WyyForces C赛 No.5',
                    state: '已结束'
                }
            ]
        };
    }
};
</script>

<style scoped>

* {
    font-size: 14px;
}

.el-scrollbar__wrap {
    overflow-x: hidden;
}

</style>
